<template>
    <div class="login">
        <div class="box">
            <div class="left">
                <p>用互联网精神服务千家万户</p>
                <h2 class="tit">携手源码 共创明天</h2>
                <p>源码工匠您生活的服务管家</p>
            </div>
            <div class="right">
                <h2 class="tit">欢迎登录</h2>
                <el-form ref="loginFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                    <el-form-item label="账号" prop="account">
                        <el-input v-model="ruleForm.account" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" type="password" />
                    </el-form-item>

                    <el-form-item>
                        <el-button class="btn" type="primary" @click="submitForm">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import { checkAccReg,checkPassReg } from "../../utils/reg.ts";

// 引入仓库
import {useUser} from "../../store/useUser.ts"
// 解构 函数方法
let {$loginapi}=useUser();

// 获取元素id
const loginFormRef = ref<any>()
// 定义数据
const ruleForm = reactive({
    account: "",
    password: ""
})

// 触发函数--验证账号
let checkAcc=(rule:any,value:any,callback:any)=>{
    console.log(rule)
    if(value===""){
        callback(new Error("请输入账号"))
    }else if(!checkAccReg(value)){
        callback(new Error("账号格式不对"))
    }else{
        callback();
    }
}

// 触发密码---验证密码
const checkPwd = (rule: any, value: any, callback: any) => {
    console.log(rule)
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if(!checkPassReg(value)) {
        callback(new Error('密码格式不对'))
    }else{
        callback();
    }
}

// 定义验证规则
let rules=reactive<any>({
    account: [{ validator: checkAcc, trigger: 'blur' }],
    password: [{ validator: checkPwd, trigger: 'blur' }]
})

// 点击提交按钮 
let submitForm=()=>{
    loginFormRef.value.validate((volid:any)=>{
        if(volid){//点击时验证一遍，返回一个结果为真就发送请求
            // 把发送请求用pinia写到仓库
            // 调用仓库里面的发送请求函数
            $loginapi({
                account: ruleForm.account,
                password: ruleForm.password
            });
        }else{
            console.log("验证不通过");
            
        }
    })
}

</script>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    background-color: #eee;
    position: relative;

    .box {
        position: absolute;
        display: flex;
        align-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .left {
            width: 300px;
            margin-right: 100px;
            font-size: 16px;
            font-weight: 900;
            line-height: 60px;
            text-align: center;

            .tit {
                font-size: 32px;
                border-bottom: 2px solid #999;
            }
        }

        .right {
            width: 300px;
            height: 320px;
            background-color: #fff;
            padding: 30px;

            .tit {
                line-height: 50px;
            }

            .btn {
                width: 100%;
            }
        }
    }
}
.el-form-item {
    margin-bottom: 25px;
}
.el-form-item__error {
    padding-top: 5px;
}
</style>